<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>权限管理</el-breadcrumb-item>
      <el-breadcrumb-item>角色列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <!-- 添加角色按钮区域 -->
      <el-row>
        <el-col>
          <el-button @click="openAddDialog" type="primary">
            添加角色
          </el-button>
        </el-col>
      </el-row>
      <!-- 角色列表 -->
      <!-- 角色列表 -->
      <el-table :data="rolesList" border stripe>
        <!-- 展开列 -->
        <el-table-column type="expand">
          <template slot-scope="scope">
            <template v-if="scope.row.children && scope.row.children.length">
              <el-row class="bdtop vcenter" :class="{ bdbottom: index1 === scope.row.children.length - 1 }"
                v-for="(item1, index1) in scope.row.children" :key="item1.id">
                <!-- 一级权限  -->
                <el-col :span="5">
                  <el-tag closable @close="delRolePrivilege(scope.row, item1)">
                    {{ item1.authName }}
                  </el-tag>
                  <i class="el-icon-caret-right"></i>
                </el-col>
                <!-- 二、三级权限 -->
                <el-col :span="19" v-if="item1.children.length">
                  <el-row class="vcenter" :class="{ bdbottom: index2 !== item1.children.length - 1 }"
                    v-for="(item2, index2) in item1.children" :key="item2.id">
                    <!-- 二级 -->
                    <el-col :span="6">
                      <el-tag type="success" closable @close="delRolePrivilege(scope.row, item2)">
                        {{ item2.authName }}
                      </el-tag>
                      <i class="el-icon-caret-right"></i>
                    </el-col>
                    <!-- 三级 -->
                    <el-col :span="18" v-if="item2.children.length">
                      <el-tag v-for="item3 in item2.children" :key="item3.id" type="warning" closable
                        @close="delRolePrivilege(scope.row, item3)">
                        {{ item3.authName }}
                      </el-tag>
                    </el-col>
                  </el-row>
                </el-col>
              </el-row>
            </template>
            <template v-else>
              <div class="vcenter" style="justify-content: center;">
                当前角色尚无分配权限
              </div>
            </template>
          </template>
        </el-table-column>
        <!-- 索引列 -->
        <el-table-column type="index"></el-table-column>
        <el-table-column label="角色名称" prop="roleName"></el-table-column>
        <el-table-column label="角色描述" prop="roleDesc"></el-table-column>
        <el-table-column label="操作" width="300px">
          <template slot-scope="scope">
            <el-button @click="openEditDialog(scope.row)" type="primary" icon="el-icon-edit" size="mini">
              编辑
            </el-button>
            <el-button @click="delRole(scope.row.id)" type="danger" icon="el-icon-delete" size="mini">
              删除
            </el-button>
            <el-button @click="openSetRightsDialog(scope.row)" type="warning" icon="el-icon-setting" size="mini">分配权限</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 添加角色 -->
    <!-- 方式一: 传递到父组件进行修改 -->
    <!-- <RoleAdd @on-add-role="addRoleHandle" ref="roleAddRef" :roleList="rolesList"></RoleAdd> -->
    <!-- 方式二：子组件中直接修改props数据 -->
    <RoleAdd ref="roleAddRef" :rolesList="rolesList"></RoleAdd>
    <!-- 修改角色 -->
    <RoleEdit @on-edit-role="editRoleHandle" ref="roleEditRef"></RoleEdit>
    <!-- 给角色分配权限 -->
    <SetRights @on-set-rights="setRightsHandler" ref="setRightsRef"></SetRights>
  </div>
</template>

<script>
import Role from './role.js'
// 导入添加角色的组件
import RoleAdd from './components/role-add.vue'
// 导入修改角色的组件
import RoleEdit from './components/role-edit.vue'
// 导入分配权限的组件
import SetRights from './components/set-rights.vue'
export default {
  ...Role,
  components: {
    RoleAdd,
    RoleEdit,
    SetRights
  }
}
</script>

<style lang="scss" scoped>
//tag标签的间距
.el-tag {
  margin: 7px;
}

//每一行的顶部加上边框
.bdtop {
  border-top: 1px solid #eee;
}

//每一行的底部加下边框
.bdbottom {
  border-bottom: 1px solid #eee;
}

//每一个一、二级的内容垂直居中
.vcenter {
  display: flex;
  align-items: center;
}
</style>